<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>二维码列表</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">二维码列表</li>
            </ul>
            <div class="layui-tab-content" id="cnotent">
                <div class="layui-row">
                    <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
                        <button class="layui-btn" data-type="all" data-events="create">创建二维码</button>
                    </div>
                </div>
                <table class="layui-hide" id="smList" lay-filter="smList"></table>
            </div>
        </div>
    </div>
</div>
<style>
    .layui-layer-title {
        background-color: #15c786 !important;
        border-bottom: 1px dashed #fff !important;
        font-size: 16px;
    }
   .layui-layer-content {
        text-align: center;
    }
    .layui-wrap-content {
        width: 100%;
        text-align: center;
        background-color: #15c786;
        padding: 2px 0px;
    }
    #qrcode {
        width: 50%;
        margin: 30px auto;
        padding: 15px;
        background-color: #fff;
        text-align: center;
        border-radius: 10px;
    }
    #qrcode img {
        margin: 0 auto;
    }
    .layui-layer-title {
        text-align: center;
        height: 50px;
        padding: 0;
        /* padding-top: 10px; */
    }
</style>

<script type="text/html" id="xxpayBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="check">二维码管理</a>
</script>

<script>

    var tplChannels = function(d){
        var channels = d.channels;
        if(channels == "") return "";
        var jsonObj = JSON.parse(channels);
        var ch = '';
        for(var i=0;i<jsonObj.length;i++){
            if("wxpay_jsapi" == jsonObj[i].channelId) {
                ch += "微信 ";
            }else if("alipay_wap" == jsonObj[i].channelId || "alipay_qr_h5" == jsonObj[i].channelId) {
                ch += "支付宝 ";
            }
        }
        return ch;
    };

    layui.use(['table','util','admin','view'], function(){
        var table = layui.table
        ,admin = layui.admin
        ,$ = layui.$
        ,view = layui.view
        ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        var appid = location.href.split('?')[1];
        if(!appid) {
            appid = layui.router().search.appId;
        }
        table.render({
            elem: '#smList'
            ,url: layui.setter.baseUrl + '/mch_qrcode/list'
            ,where: {appId:appid,access_token: layui.data(layui.setter.tableName).access_token}
            ,id: 'tableReload'
            ,cols: [[
                {field:'id', title: '二维码ID', sort: true }
                ,{field:'codeName', title: '二维码名称' }
                ,{field:'channels', title: '支持的扫码支付渠道',templet: tplChannels }
                ,{field:'createTime',  title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime) }}</div>' }
                ,{field:'edite', title: '操作', width: 200, toolbar: '#xxpayBar' }
            ]]
            ,page: true
            ,skin: 'line'
        });

        //监听工具条
        table.on('tool(smList)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                view.xxpayPopup("查看二维码", "account/qrcode/detail", {id: data.id, appId: data.appId}, {btn: false,area: ['60%', '65%']});
            } else if(obj.event === 'edit'){
                view.xxpayPopup("编辑二维码", "account/qrcode/update", {id: data.id}, {area: ['60%', '65%']});
            } else if(obj.event === 'check'){
                var curEWM = data.id;
                var peizhiT = JSON.parse(data.channels);

                admin.req({
                    url: layui.setter.baseUrl + '/mch_qrcode/view_code'
                    ,data: { id: curEWM }
                    ,success: function(res){
                        if(res.code == 0){
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-molv', //样式类名
                                title: '扫码付款',
                                scrollbar: false,//浏览器滚动条已锁
                                closeBtn: 0, //不显示关闭按钮
                                shadeClose: true, //开启遮罩关闭
                                // area: ['300px', '380px'],
                                area: '300px',
                                content:  '<div class="layui-wrap-content"><div><div style="margin-bottom:5px;"></div><img src="'+res.data.codeImgUrl+'"/></div></div><div style="margin:10px auto;text-align:center"><img id="zhifubao" style="display:none" src="layui/images/imgs/zfb.png" alt="支付宝"/><img id="weixin" style="display:none" src="layui/images/imgs/wxpay.png" alt="微信"/></div>'
                            });

                            for(var i = 0;i< peizhiT.length;i++){

                                //if(peizhiT[i].channelId == 'wxpay_jsapi'){
                                $('#weixin').css('display','inline-block');
                                //}else if(peizhiT[i].channelId == 'alipay_wap'){
                                $('#zhifubao').css('display','inline-block');
                                //}
                            }

                            /*var qrcode = new QRCode(document.getElementById("qrcode"),{
                                text: res.data.codeUrl,
                                width: 100,
                                height: 100,

                            });*/

                        }
                    }
                })
            }
        })

        // 事件处理
        var events = {
            create: function(othis, type){
                view.xxpayPopup("新建应用", "account/qrcode/create", {appId: appid}, {area: ['70%', '65%']});
            }
        };
        $('.layuiAdmin-btns .layui-btn').on('click', function(){
            var othis = $(this)
                    ,thisEvent = othis.data('events')
                    ,type = othis.data('type');
            events[thisEvent] && events[thisEvent].call(this, othis, type);
        });


    })

</script>